<template>
  <div v-loading.lock="loading" class="base-content">
    <div class="basic-info">
      <el-form ref="queryForm" :inline="true" :model="queryForm">
        <el-row>
          <el-col :span="6">
            <el-form-item label="入库单编号" prop="orderNum">
              <el-input v-model="queryForm.orderNum" placeholder="订单编号" />
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item label="业务类型" prop="orderTypeCode">
              <el-select
                v-model="queryForm.orderTypeCode"
                placeholder="请选择"
                filterable
                clearable
              >
                <el-option
                  v-for="item in orderTypeOptions"
                  :key="item.key"
                  :label="item.value"
                  :value="item.key"
                ></el-option>
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item label="状态" prop="status">
              <el-select
                v-model="queryForm.status"
                placeholder="请选择"
                filterable
                clearable
              >
                <el-option
                  v-for="item in orderStatusOptions"
                  :key="item.key"
                  :label="item.value"
                  :value="item.key"
                ></el-option>
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item label="来源单号" prop="sourceNum">
              <el-input v-model="queryForm.sourceNum" placeholder="来源单号" />
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item label="入库仓库" prop="storageId">
              <el-select
                v-model="queryForm.storageId"
                placeholder="请选择入库仓库"
                filterable
                clearable
              >
                <el-option
                  v-for="item in storageIdData"
                  :key="item.id"
                  :label="item.name"
                  :value="item.id"
                ></el-option>
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item label="申请时间" prop="createTimeArr">
              <el-date-picker
                v-model="queryForm.createTimeArr"
                style="width: 230px"
                type="daterange"
                range-separator="至"
                start-placeholder="开始日期"
                end-placeholder="结束日期"
                value-format="yyyy-MM-dd"
                clearable
              >
              </el-date-picker>
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item label="申请人" prop="applicantName">
              <el-input
                v-model="queryForm.applicantName"
                placeholder="申请人"
              />
            </el-form-item>
          </el-col>
        </el-row>
      </el-form>
      <div class="base-content-operate">
        <el-button icon="el-icon-plus" type="primary" @click="onNew"
          >新增</el-button
        >
        <el-button icon="el-icon-search" type="primary" @click="onQuery"
          >查询</el-button
        >
        <el-button @click="cancelForm">清空</el-button>
      </div>
      <el-table
        :data="list"
        element-loading-text="Loading"
        fit
        highlight-current-row
      >
        <el-table-column align="center" label="序号" width="50">
          <template slot-scope="scope">
            {{ scope.$index + 1 }}
          </template>
        </el-table-column>
        <el-table-column label="入库单编号" min-width="130">
          <template slot-scope="scope">
            <el-link size="mini" type="primary" @click="handleView(scope.row)">
              {{ scope.row.orderNum }}</el-link
            >
          </template>
        </el-table-column>
        <el-table-column label="业务类型">
          <template slot-scope="scope">
            {{ scope.row.orderTypeName }}
          </template>
        </el-table-column>
        <el-table-column label="状态">
          <template slot-scope="scope">
            {{ scope.row.statusName }}
          </template>
        </el-table-column>
        <el-table-column label="入库仓库">
          <template slot-scope="scope">
            {{ scope.row.storageName }}
          </template>
        </el-table-column>
        <el-table-column label="来源单号">
          <template slot-scope="scope">
            {{ scope.row.sourceNum }}
          </template>
        </el-table-column>
        <el-table-column label="检验单号">
          <template slot-scope="scope">
            {{ scope.row.formNum }}
          </template>
        </el-table-column>
        <el-table-column label="应收总数">
          <template slot-scope="scope">
            {{ scope.row.receiveCount }}
          </template>
        </el-table-column>
        <el-table-column label="已收总数">
          <template slot-scope="scope">
            {{ scope.row.confirmReceiveCount }}
          </template>
        </el-table-column>
        <el-table-column label="申请人">
          <template slot-scope="scope">
            {{ scope.row.applicantName }}
          </template>
        </el-table-column>
        <el-table-column label="申请时间">
          <template slot-scope="scope">
            {{ scope.row.createTime }}
          </template>
        </el-table-column>
        <el-table-column label="完成时间">
          <template slot-scope="scope">
            {{ isDefaultTime(scope.row.completeTime) }}
          </template>
        </el-table-column>
        <el-table-column label="操作">
          <template slot-scope="scope">
            <div class="base-table-operation">
              <!-- 状态(100.待提交、101审核中、102审核驳回、103检验中、200处理中、300已完成、301已作废) -->
              <el-link
                v-if="scope.row.status == 100 || scope.row.status == 102"
                v-rights="'Update'"
                size="mini"
                type="primary"
                @click="handleEdit(scope.row)"
                >编辑</el-link
              >
              <el-link
                v-if="scope.row.status == 103"
                v-rights="'Inspect'"
                size="mini"
                type="primary"
                @click="handleInspect(scope.row)"
                >开始验收</el-link
              >
              <el-link
                v-if="scope.row.status == 200"
                v-rights="'Handle'"
                size="mini"
                type="primary"
                @click="handleHandle(scope.row)"
                >开始入库</el-link
              >
              <el-link
                v-if="
                  scope.row.status == 100 ||
                  scope.row.status == 102 ||
                  scope.row.status == 103
                "
                v-rights="'Void'"
                size="mini"
                type="danger"
                @click="handleVoid(scope.row)"
                >作废</el-link
              >
            </div>
          </template>
        </el-table-column>
      </el-table>

      <BasePagination
        :total="pagination.total"
        :current-page="pagination.pageIndex"
        :page-count="pagination.total"
        @changePage="changePage"
        @sizeChange="sizeChange"
      />
    </div>

    <OrderDetails
      v-if="dialogDetailsVisible"
      ref="OrderDetails"
      :edit-id.sync="editId"
      :dialog-details-visible.sync="dialogDetailsVisible"
    />

    <OrderEdit
      v-if="dialogFormVisible"
      ref="OrderEdit"
      :edit-id.sync="editId"
      :dialog-form-visible.sync="dialogFormVisible"
    />

    <OrderInspect
      v-if="dialogInspectVisible"
      ref="OrderInspect"
      :edit-id.sync="editId"
      :dialog-inspect-visible.sync="dialogInspectVisible"
    />

    <OrderHandle
      v-if="dialogHandleVisible"
      ref="OrderHandle"
      :edit-id.sync="editId"
      :dialog-handle-visible.sync="dialogHandleVisible"
    />
  </div>
</template>

<script>
import { GetConfigByKey } from "../../../../api/System/SystemDict.js";
import { getStorageList } from "../../../../api/Material/Common.js";
import {
  getList,
  invalidOrder,
} from "../../../../api/Material/MaterialOrderIn.js";
import { MessageBox } from "element-ui";
import OrderDetails from "./RKOrderDetails.vue";
import OrderEdit from "./RKOrderEdit.vue";
import OrderInspect from "./RKOrderInspect.vue";
import OrderHandle from "./RKOrderHandle.vue";
import { isDefaultTime } from "../../../../utils/time.js";
export default {
  name: "RKOrderList",
  components: { OrderDetails, OrderEdit, OrderInspect, OrderHandle },
  data() {
    return {
      loading: true,
      dialogDetailsVisible: false,
      dialogFormVisible: false,
      dialogInspectVisible: false,
      dialogHandleVisible: false,
      editId: "",
      list: [],
      orderStatusOptions: [],
      orderTypeOptions: [],
      statusTypeData: [],
      storageIdData: [],
      queryForm: {
        orderNum: "",
        sourceNum: "",
        orderTypeCode: null,
        storageId: null,
        status: null,
        applicantName: "",
        startDate: null,
        endDate: null,
        createTimeArr: [],
      },
      pagination: {
        pageIndex: 1,
        pageSize: 10,
        total: 0,
      },
    };
  },
  created() {
    this.init();
    this.getList();
  },
  methods: {
    isDefaultTime,
    async init() {
      // 查询字典表=>入库单状态
      GetConfigByKey({ configKey: "MaterialOrderIn_OrderStatus" }).then(
        (res) => {
          if (
            res.data != null &&
            res.data.length > 0 &&
            res.data[0].value != null
          ) {
            this.orderStatusOptions = JSON.parse(res.data[0].value);
          }
        }
      );
      // 查询字典表=>入库单类型
      GetConfigByKey({ configKey: "MaterialOrderIn_OrderTypeCode" }).then(
        (res) => {
          if (
            res.data != null &&
            res.data.length > 0 &&
            res.data[0].value != null
          ) {
            this.orderTypeOptions = JSON.parse(res.data[0].value);
          }
        }
      );
      await this.getStorageOptions();
    },
    getStorageOptions() {
      return new Promise((resolve) => {
        getStorageList().then((res) => {
          this.storageIdData = res.data.dataList;
          resolve();
        });
      });
    },
    changePage(val) {
      this.pagination.pageIndex = val;
      this.getList();
    },
    sizeChange(val) {
      this.pagination.pageIndex = 1;
      this.pagination.pageSize = val;
      this.getList();
    },
    cancelForm() {
      this.$refs.queryForm.resetFields();
      this.pagination.pageIndex = 1;
      this.getList();
    },
    getList() {
      this.loading = true;
      if (this.queryForm.createTimeArr.length > 0) {
        this.queryForm.startDate = this.queryForm.createTimeArr[0];
        this.queryForm.endDate = this.queryForm.createTimeArr[1];
      } else {
        this.queryForm.startDate = null;
        this.queryForm.endDate = null;
      }
      getList(this.queryForm, this.pagination)
        .then((res) => {
          this.list = res.data.dataList ? res.data.dataList : [];
          this.pagination.total = res.data.total;
          this.loading = false;
        })
        .catch(() => {
          this.loading = false;
        });
    },
    // 查看
    handleView(rowData) {
      this.dialogDetailsVisible = true;
      this.editId = rowData.id;
    },
    // 编辑
    handleEdit(rowData) {
      this.dialogFormVisible = true;
      this.editId = rowData.id;
    },
    // 检验
    handleInspect(rowData) {
      this.dialogInspectVisible = true;
      this.editId = rowData.id;
    },
    // 处理
    handleHandle(rowData) {
      this.dialogHandleVisible = true;
      this.editId = rowData.id;
    },
    // 作废
    handleVoid(rowData) {
      MessageBox.confirm("此操作将报废该数据, 是否继续?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
        center: true,
      })
        .then(() => {
          invalidOrder({ id: rowData.id }).then((res) => {
            this.getList();
          });
        })
        .catch((action) => {});
    },
    // 新增
    onNew() {
      this.dialogFormVisible = true;
    },
    onQuery() {
      this.pagination.pageIndex = 1;
      this.getList();
    },
  },
};
</script>
